<template>
  <el-card>
    <template #header>
      <el-row justify="space-between" align="middle">
        <el-col :span="12" style="font-size: 35px;color: #3f87f8;text-align: left">用户列表</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" size="large" :icon="Plus" @click="handleAdd">创建</el-button>
        </el-col>
      </el-row>
    </template>
    <el-table :data="userList" stripe style="width: 100%"  v-loading="loading">
      <el-table-column align="center" type="expand">
        <template #default="props">
          <el-descriptions :border="true" :column="2">
            <el-descriptions-item label="真实姓名">{{ props.row.userProfile.realname }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ props.row.userProfile.birth }}</el-descriptions-item>
            <el-descriptions-item label="家庭地址">{{ props.row.userProfile.address }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ props.row.userProfile.sex }}</el-descriptions-item>
            <el-descriptions-item label="QQ">{{ props.row.userProfile.qq }}</el-descriptions-item>
            <el-descriptions-item label="微信">{{ props.row.userProfile.wechat }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="user.userId" label="ID" width="50"></el-table-column>
      <el-table-column align="center" prop="user.avatar" label="头像" width="80">
        <template #default="scope">
          <el-avatar :src="scope.row.user.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="user.username" label="用户名"></el-table-column>
      <el-table-column align="center" prop="user.role" label="角色"></el-table-column>
      <el-table-column align="center" prop="userProfile.lastLoginTime" label="上次登录时间">
        <template #default="scope">
          <el-tooltip :content="scope.row.userProfile.lastLoginTime">
            <span>{{ utils.calLastTime(scope.row.userProfile.lastLoginTime) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userProfile.lastLoginIp" label="上次登录IP">
        <template #default="scope">
          <span>{{scope.row.userProfile.lastLoginIp}}<br>({{scope.row.userProfile.lastLoginTerritory}})</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="right" width="200">
        <template #header>
          <el-input v-model="searchKey" size="small" placeholder="搜索用户Id或用户名">
            <template #append>
              <el-button :icon="Search" @click="handleSearch"/>
            </template>
          </el-input>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm title="确定要删除此用户吗?"
                         @confirm="handleDelete(scope.$index, scope.row)">
            <template #reference>
              <el-button
                  size="small"
                  type="danger">删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :hide-on-single-page="true"
        v-model:currentPage="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
  </el-card>
</template>

<script setup lang="ts">
import {Plus, Search} from '@element-plus/icons-vue'
import api from "../../../api/api";
import {onBeforeMount, onMounted, ref} from "vue";
import utils from "../../../utils";

const pageInfo = ref({
  pageSize: 5,
  pageNum: 1,
  total: 0
})
const searchKey = ref('')
const userList = ref()
const loading =ref(false)

onBeforeMount(() => {
  getUserList()
})

onMounted(() => {

})
const getUserList = () => {
  loading.value=true
  api.user.getUserList({
    pageSize: pageInfo.value.pageSize,
    pageNum: pageInfo.value.pageNum,
    searchKey: searchKey.value
  }).then(res => {
    if (res.data.code == 0) {
      userList.value = res.data.data.list
      pageInfo.value.total = res.data.data.count
    }
    loading.value=false
  })
}
const handleSizeChange = (val: number) => {
  pageInfo.value.pageSize = val
  getUserList()
}
const handleCurrentChange = (val: number) => {
  pageInfo.value.pageNum = val
  getUserList()
}
const handleSearch = () => {
  getUserList()
}

const handleAdd =()=>{

}
const handleEdit = ($index: number | string, row: any)=>{

}
const handleDelete = ($index: number | string, row: any)=>{

}
</script>

<style scoped>

</style>
